class PomodoroTimer {
  constructor() {
    this.timer = null;
    this.timeLeft = 0;
    this.medalsEarned = 0;
    this.fastForward = false;
    this.isPaused = false;
    this.audio = new Audio();
    this.init();
  }

  init() {
    // 获取DOM元素
    this.timerDisplay = document.querySelector('.timer-display');
    this.medalGrid = document.querySelector('.medal-grid');
    this.medals = document.querySelectorAll('.medal');
    this.notification = this.createNotification();

    // 绑定事件
    document.querySelectorAll('.btn').forEach(btn => {
      btn.addEventListener('click', () => this.startTimer(btn.dataset.time));
    });
    document.getElementById('start-btn').addEventListener('click', () => {
      const customTime = document.getElementById('custom-time').value;
      if (customTime > 0) this.startTimer(customTime);
    });
    document.getElementById('fast-forward').addEventListener('click', () => {
      this.fastForward = !this.fastForward;
      this.updateFastForwardButton();
    });
    
    document.getElementById('pause-btn').addEventListener('click', () => {
      this.pauseTimer();
    });
    
    document.getElementById('resume-btn').addEventListener('click', () => {
      this.resumeTimer();
    });
  }

  startTimer(minutes) {
    this.showLoading();
    if (this.isPaused) {
      this.isPaused = false;
      this.resumeTimer();
      return;
    }
    
    this.stopTimer();
    this.timeLeft = minutes * 60;
    this.updateDisplay();
    this.playSound('start');
    
    const interval = this.fastForward ? 200 : 1000;
    this.timer = setInterval(() => this.tick(), interval);
    setTimeout(() => this.hideLoading(), 500);
  }

  pauseTimer() {
    this.isPaused = true;
    this.stopTimer();
    this.playSound('pause');
  }

  resumeTimer() {
    if (!this.isPaused) return;
    
    this.isPaused = false;
    const interval = this.fastForward ? 200 : 1000;
    this.timer = setInterval(() => this.tick(), interval);
    this.playSound('resume');
  }

  tick() {
    this.timeLeft--;
    this.updateDisplay();
    
    if (this.timeLeft <= 0) {
      this.stopTimer();
      this.handleComplete();
    }
  }

  stopTimer() {
    clearInterval(this.timer);
    this.timer = null;
  }

  updateDisplay() {
    const minutes = Math.floor(this.timeLeft / 60);
    const seconds = this.timeLeft % 60;
    this.timerDisplay.textContent = 
      `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  }

  handleComplete() {
    this.medalsEarned++;
    this.playSound('complete');
    this.showNotification('🎉 恭喜！', `你获得了第${this.medalsEarned}个勋章！`);
    this.updateMedals();
    
    if (this.medalsEarned % 5 === 0) {
      this.playSound('milestone');
      this.showNotification('🌟 里程碑！', `你已经获得了${this.medalsEarned}个勋章！`);
    }
  }

  playSound(type) {
    const sounds = {
      start: 'sounds/start.mp3',
      pause: 'sounds/pause.mp3',
      resume: 'sounds/resume.mp3',
      complete: 'sounds/complete.mp3',
      milestone: 'sounds/milestone.mp3'
    };
    
    if (sounds[type]) {
      this.audio.src = sounds[type];
      this.audio.play();
    }
  }

  updateMedals() {
    if (this.medalsEarned <= 30) {
      const medal = this.medals[this.medalsEarned - 1];
      medal.classList.add('earned');
      if (navigator.vibrate) {
        navigator.vibrate([100, 50, 100]);
      }
    }
  }

  updateFastForwardButton() {
    const btn = document.getElementById('fast-forward');
    btn.textContent = this.fastForward ? '正常速度' : '20倍速';
    btn.style.backgroundColor = this.fastForward ? '#2ecc71' : '#e67e22';
  }

  createNotification() {
    const div = document.createElement('div');
    div.className = 'notification';
    div.innerHTML = `
      <div class="notification-content">
        <div class="notification-icon">🎉</div>
        <div class="notification-text">
          <div class="notification-title"></div>
          <div class="notification-subtitle"></div>
        </div>
      </div>
    `;
    document.body.appendChild(div);
    return div;
  }

  showNotification(title, subtitle) {
    this.notification.querySelector('.notification-title').textContent = title;
    this.notification.querySelector('.notification-subtitle').textContent = subtitle;
    this.notification.style.display = 'flex';
    
    // 添加震动反馈
    if (navigator.vibrate) {
      navigator.vibrate(200);
    }
    
    setTimeout(() => {
      this.notification.style.display = 'none';
    }, 3000);
  }

  showLoading() {
    const loader = document.createElement('div');
    loader.className = 'loader';
    document.body.appendChild(loader);
  }

  hideLoading() {
    const loader = document.querySelector('.loader');
    if (loader) {
      loader.remove();
    }
  }
}

// 初始化计时器
new PomodoroTimer();
